<template>
    <!-- 
        签名组件
        LYH
        横屏组件
     -->
    <view class="signa">
        <view class="btn">
            <view class="cancel-btn" @click="clear">
                <span class="iconfont" style="margin-right: 10px;"></span>
                重写
            </view>
            
            <view class="save-btn" @click="save">
                <span class="iconfont" style="margin-right: 10px;"></span>
                保存
            </view>
            
            <view class="cancel-bth" @click="colse">
                <span class="iconfont" style="margin-right: 10px;"></span>
                关闭
            </view>
        </view>
        <canvas class="canvas" disable-scroll="true" :style="{'width':width,'height':height}" canvas-id="designature" @touchstart="starts"
        @touchmove="moves" @touchend="end"></canvas>
    </view>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                dom: null,
                line: [],
                radius: 0,
                width: '0px',
                height: '0px',
            }
        },
        onLoad() {
            
        },
        computed:{
            
        },
        created() {
            uni.getSystemInfo({
                success: (res) => {
                    this.width = res.windowWidth - 60 + 'px';
                    this.height = res.windowHeight - 15 + 'px';
                }
            });
            this.dom = uni.createCanvasContext('designature',this);
            
        },
        onShow(){
            
        },
        methods: {
            end(e) {
                
            },
            distance(a, b) {
                let x = b.x - a.x;
                let y = b.y - a.y;
                return Math.sqrt(x * x + y * y);
            },
            // 开始
            starts(e) {
                this.line.push({
                    points: [{
                        time: new Date().getTime(),
                        x: e.touches[0].x,
                        y: e.touches[0].y,
                        dis: 0
                    }]
                })
                let currentPoint = {
                    x: e.touches[0].x,
                    y: e.touches[0].y
                }
                this.currentPoint = currentPoint
                this.drawer(this.line[this.line.length - 1])
            },
            // 滑动
            moves(e) {
                let point = {
                    x: e.touches[0].x,
                    y: e.touches[0].y
                }
                this.lastPoint = this.currentPoint,
                    this.currentPoint = point
                this.line[this.line.length - 1].points.push({
                    time: new Date().getTime(),
                    x: e.touches[0].x,
                    y: e.touches[0].y,
                    dis: this.distance(this.currentPoint, this.lastPoint)
                })
                this.drawer(this.line[this.line.length - 1])
            },
            // 书写
            drawer(item) {
                let x1, x2, y1, y2, len, radius, r, cx, cy, t = 0.5,
                    x, y;
                var time = 0;
                if (item.points.length > 2) {
                    let lines = item.points[item.points.length - 3];
                    let line = item.points[item.points.length - 2];
                    let end = item.points[item.points.length - 1];
                    x = line.x;
                    y = line.y;
                    x1 = lines.x;
                    y1 = lines.y;
                    x2 = end.x;
                    y2 = end.y;
                    var dis = 0;
                    time = (line.time - lines.time) + (end.time - line.time)
                    dis = line.dis + lines.dis + end.dis;
                    var dom = this.dom;
                    var or = Math.min(time / dis * this.linePressure + this.lineMin, this.lineMax);
                    cx = (x - (Math.pow(1 - t, 2) * x1) - Math.pow(t, 2) * x2) / (2 * t * (1 - t))
                    cy = (y - (Math.pow(1 - t, 2) * y1) - Math.pow(t, 2) * y2) / (2 * t * (1 - t))
                    dom.setLineCap('round')
                    dom.beginPath();
                    dom.setStrokeStyle('black')
                    dom.setLineWidth(5)
                    dom.moveTo(x1, y1);
                    dom.quadraticCurveTo(cx, cy, x2, y2);
                    dom.stroke();
                    dom.draw(true)
                }
            },
            // 清除
            clear() {
                this.dom.clearRect(0, 0, 1000, 1000)
                this.dom.draw()
            },
            //关闭
            colse(e){
                this.$emit('colse',false);
            },
            // 保存图片
            save() {
                var t=this;
                uni.canvasToTempFilePath({
                    canvasId: 'designature',
                    fileType: 'png',
                    quality: 1, //图片质量
                    success:function(res) {
						// #ifdef MP-WEIXIN
							wx.getFileSystemManager().readFile({
								filePath: res.tempFilePath, //选择图片返回的相对路径
								encoding: 'base64', //编码格式
								success: res => {
									//成功的回调
									let topBase64Url = "data:image/png;base64," + 	res.data
									t.$emit('getImg',topBase64Url)
									
								}
							});
						// #endif
						
						// #ifdef H5
							t.urlTobase64(res.tempFilePath)
						// #endif
					
                    },
                    fail(e){
                        console.log(e)
                    }
                },this)
            },
			// 本地图片转base64
			urlTobase64(url){
				var that = this;
				var toBase64Url;
				uni.request({
					url: url,
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					}, 
					responseType:'arraybuffer',
					success: res => {
						console.log(res.data,'67666666666666')
						let base64 = wx.arrayBufferToBase64(res.data);
						let topBase64Url = "data:image/jpeg;base64," + 	base64
						that.$emit('getImg',topBase64Url)
					},
					fail: (e) => {
						console.log(e)
					},
					complete: () => {}
				});
			}
        }
    }
</script>

<style scoped lang="scss">
    .signa {
        position: relative;
        overflow: hidden;
        background-color: #f1efef;
        height: 100vh;
        width: 100vw;
        .canvas {
            background-color: #FFFFFF;
            position: absolute;
            z-index: 9999;
            left: 50px;
            top: 6px;
            border: 1px solid #d6d6d6;
        }
        .btn {
            height: 100vh;
            position: fixed;
            background-color: #007AFF;
            font-size: 32rpx;
            .cancel-btn {
                width: 20vh;
                position: fixed;
                left: 50rpx;
                border: 1rpx solid #a9a1a1;
                transform: rotate(90deg);
                color: #666;
                margin-left: -10vh;
                margin-top: 15vh;
                height: 65rpx;
                line-height: 65rpx;
                border-radius: 3px;
                text-align: center;
                justify-content: center;
            }
    
            .save-btn {
                position: absolute;
                z-index: 999;
                display: inline-flex;
                margin-top: 47vh;
                margin-left: -10vh;
                transform: rotate(90deg);
                background: #007AFF;
                width: 20vh;
                left: 50rpx;
                border-radius: 3px;
                border: 1rpx solid #007AFF;
                color: #fff;
                height: 65rpx;
                line-height: 65rpx;
                text-align: center;
                justify-content: center;
            }
            
            .cancel-bth{
                    position: absolute;
                    z-index: 999;
                    display: inline-flex;
                    margin-left: -10vh;
                    -webkit-transform: rotate(90deg);
                    transform: rotate(90deg);
                    width: 20vh;
                    left: 25px;
                    border-radius: 3px;
                    color: #fff;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    justify-content: center;
					background: #de7f7f;
					border: 1px solid #de7f7f;
					margin-top: 80vh;
            }
        }
    }
</style>